<template>
    <div class="keyWalletZx" :class="{keyWalletHideZX:!showMaskF}">

	    <div class="keyWalletmaskZx" :style="{'width': zxPageWidth+'px','height':zxPageHeight+'px'}" v-if="showMaskF" @touchstart="hideMask"></div>
    	<div class="passBoxZx">
    		<div class="keyWalletcontant" v-if="showMaskF">
				<div class="passHeaderZx">
					<span class="hide" @touchstart="closePassword">
						<!--<i class="icon njfont nj-shibai"></i>-->
						x
					</span>
					<p class="title">
						<span>
							请输入支付密码
						</span>
					</p>
				</div>

				<div class="keydiv">
					<!--<p>输入支付密码</p>-->
					<div class="srinput">
						<!--<input type="password" maxlength="6" class="maxinput" v-model="keyall" ref="maxinput1" />-->
						<span  class="maxinput"  ref="maxinput1" ></span>
						<div class="mininput">
							<input type="password" maxlength="1" :value="key1" ref="input1" />
							<input type="password" maxlength="1" :value="key2" ref="input2" />
							<input type="password" maxlength="1" :value="key3" ref="input3" />
							<input type="password" maxlength="1" :value="key4" ref="input4" />
							<input type="password" maxlength="1" :value="key5" ref="input5" />
							<input type="password" maxlength="1" :value="key6" ref="input6" />
						</div>
					</div>
				</div>
				<!--<span class="sure" @touchstart="successfn">确定</span>-->
				<div style="margin: 0.5rem;text-align:center;color: #385AD5;font-size: 12px;" @click="online">
					<span>忘记密码，去咨询客服</span>
				</div>
		   </div>

	    	<div class="myBox" v-if="showMaskF">
				<span>
					<div @touchstart.stop="getNum($event)" style="border-top: 0px;border-left: 0;">{{num1}}</div>
					<div @touchstart.stop="getNum($event)" style="border-top: 0px;">{{num2}}</div>
					<div @touchstart.stop="getNum($event)" style="border-top: 0px;border-right: 0;">{{num3}}</div>
				</span>
				<span>
					<div @touchstart.stop="getNum($event)" style="border-left: 0;">{{num4}}</div>
					<div @touchstart.stop="getNum($event)">{{num5}}</div>
					<div @touchstart.stop="getNum($event)" style="border-right: 0;">{{num6}}</div>
				</span>
				<span>
					<div @touchstart.stop="getNum($event)" style="border-left: 0;">{{num7}}</div>
					<div @touchstart.stop="getNum($event)">{{num8}}</div>
					<div @touchstart.stop="getNum($event)" style="border-right: 0;">{{num9}}</div>
				</span>
				<span>			<!--@touchstart.stop="shuffle([1,2,3,4,5,6,7,8,9,0])"  随机键盘-->
					<div class="zxsure" style="border-left: 0;">  </div>
					<div @touchstart="getNum($event)">{{num0}}</div>
					<div class="del" @touchstart.stop="deletPassword" style="border-right: 0;">
						<span>
							<i class="icon njfont nj-shibai"></i>
						</span>
					</div>
				</span>
			</div>
    	</div>

    </div>
</template>
<script>

import {mapMutations,mapGetters} from 'vuex';
import {Toast} from "../../utils/toast";
import { getHrefParams } from '../../utils/zx';
import MD5 from 'js-md5';
import axios from 'axios';
// import goOnlineServer from '@/utils/ZWY/onlineServer';

export default {
    props: {
    	sendOrder:{
    		type:Function,
    		default:function(){
    			return ()=>{}
    		}
		},
		pwdRegFaild: {
			type: Function,
			default: () => {}
		},
		//取消输入密码的回调
		cancelPassword: {
			type: Function,
			default: () => {}
		}
    },
    data() {
        return {
            key1: "",
			key2: "",
			key3: "",
			key4: "",
			key5: "",
			key6: "",
			keyall: "",
			showMaskF:false,
			falg:true,
			num1:1,
			num2:2,
			num3:3,
			num4:4,
			num5:5,
			num6:6,
			num7:7,
			num8:8,
			num9:9,
			num0:0,
			userPassword:[],
            timer:'',
            sessionId:null
        }
    },
    computed: {
    	zxPageHeight(){
			return window.screen.height;
		},
		zxPageWidth(){
			return window.screen.width;
		},
		// ...mapGetters('wxh',[
		// 	"login","userInfo"
		// ])
    },
    methods: {
    	// ...mapMutations('zx',[

		// ]),
		closePassword() {
			//用户取消输入密码的回调
			this.cancelPassword();
			this.showOrHide();
		},
    	showOrHide(){
//  		this.setKeyWallet();
			this.userPassword = [];
			this.keyall = "";
    		if(this.showMaskF){
				// console.log("第一次就被调用");
				this.showMaskF = false;
    		}else{
    			this.showMaskF = true;
    			let that = this;
    			this.timer = setTimeout(()=>{
					if(!that.key1){
						that.$emit("WxhpasswordPendingChange", {response: false, msg: "未输入密码"});
					}
				},30000)
    		}
    	},
    	clearKeyall(){
    		this.userPassword = [];
    		this.keyall = '';
    		this.key1 = '';
    		this.key2 = '';
    		this.key3 = '';
    		this.key4 = '';
    		this.key5 = '';
    		this.key6 = '';
    	},
    	setKeyWallet() {
//  		console.log(555)
//			let that = this
//			setTimeout(function() {
//				if(that.$refs.maxinput1){
//					that.$refs.maxinput1.focus()
//				}
//			}, 300)
		},
		//渲染显示输入了密码
		passwordfn1() {
			if(/^[0-9]*$/g.test(this.keyall)) {
				let pwd = this.keyall.trim();
				this.key1 = pwd[0]
				this.key2 = pwd[1]
				this.key3 = pwd[2]
				this.key4 = pwd[3]
				this.key5 = pwd[4]
				this.key6 = pwd[5]
			} else {
				let arr = this.keyall.match(/\d/g);
				this.keyall = this.keyall.slice(0, this.keyall.lastIndexOf(arr[arr.length - 1]) + 1)
			}
		},
		hideMask(){
//			this.showMaskF = false;
		},
		//去到在线客服页
	online() {
        // if (!this.login) {
        //   this.$router.push({path: '/main/login'});
        //   return;
        // }
        // let req = {
        //   userid: this.userInfo.userid,
        //   userName: encodeURI(this.userInfo.mobile),
        //   enterpriseid: this.userInfo.enterpriseid, //测试
        //   sessionId: this.sessionId
        // };
        // let url = "http://yuchai.weilian.cn:17999/yncrm/crm_web_client";//现网
        // let url = "http://116.10.197.142:13008/yncrm/crm_web_client";//测试
//      let url = 'http://test.crm.scn.weilian.cn/static/crm/customerChat.html';//old  原来的
        // let url = 'http://test.crm.scn.weilian.cn/static/custchat/index.html';//new
//      let dataStr = ''; //数据拼接字符串
//      Object.keys(req).forEach(key => {
//        dataStr += key + '=' + req[key] + '&';
//      });
//
//      if (dataStr !== '') {
//        dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
//        url = url + '?' + dataStr;
//      }

        //测试环境
    //  let userIconUrl = this.userInfoCache.imgUrl?this.userInfoCache.imgUrl:'static/image/user4.png';
    //  let url = 'http://test.crm.scn.weilian.cn/static/custchat/index.html' + '?sessionId=' + this.sessionId+'&enterpriseId=' + this.userInfo.enterpriseid+'&userIconUrl=' + userIconUrl;
    //   location.href = 'http://192.168.5.200:8882';
    //  this.$router.push({path: 'online', query: {urlData: url}});
        //生产暂时跳服务中心
		// this.$router.push({name: 'server'});
        // goOnlineServer(this)
		

      },
		// 校验密码
		checkUserKey(){
			// return new Promise((resolve, reject) => {
				let url = window.api.customer_host + "/customer/checkWalletPassword";
				let params = {
					walletPassword:MD5(this.keyall)
				};
				let config = {
					url:url,
					method:"GET",
					params,
					headers:{
						sessionId:this.sessionId
					}
				}
				axios(config).then((res)=>{
					console.log(res);
					if(res.data.returnCode == 1){
						this.sendOrder();
						//返回一个对象，pwPendingState: 密码校验过程等待的标志，result：密码校验结果，msg：提示信息
						this.$emit("passwordPendingChange", {pwPendingState: false, result: true, msg: "密码校验成功"});
						this.$emit("WxhpasswordPendingChange", {result: true, msg: "密码校验成功", keyall: this.keyall});
						this.showOrHide();
					}else{
						this.clearKeyall();
						this.$emit("passwordPendingChange", {pwPendingState: true, result: false, msg: "密码校验失败"});
						this.$emit("WxhpasswordPendingChange", {result: false, msg: "密码校验失败", keyall: this.keyall});
						// Toast({
						// 	message: res.data.msg,
						// 	duration: 1000,
						// 	type: 'fail'
						// });
					}
				});
			// });
		},
		//确定密码
		successfn(){
			console.log(this.keyall,MD5(this.keyall))

			if(!this.keyall || this.keyall.length<6) {
				Toast({
					message: '密码未填写完整',
					duration: 1000,
					type: 'fail'
				});
//				this.$refs.maxinput1.focus()
				return
			}

			this.checkUserKey();
//			this.showOrHide();
//			this.showMaskF = false;
		},
		//键盘开始
		getNum(e){
				var  mydiv = e.target;
				this.getArr(mydiv).addClass('lp');
				var that = this;
				if(this.userPassword.length < 6){
					this.userPassword.push(e.target.innerHTML);
				}

				this.keyall = this.userPassword.join().replace(/,/g,'');

				this.passwordfn1();  // 密码框显示
				var time1 =  setTimeout(function(){
					that.getArr(mydiv).removeClass('lp');
					window.clearTimeout(time1);
				},50)

				if(this.userPassword.length === 6){
				  clearTimeout(this.timer);
					this.successfn();
				}
//				console.log(e.target.innerHTML);
//				console.log(this.userPassword);
			},
			deletPassword(){
				this.userPassword.splice(this.userPassword.length-1,1);
				this.keyall = this.userPassword.join().replace(/,/g,'');

				this.passwordfn1(); // 密码框显示

				console.log(this.userPassword);
			},
			shuffle(a) {
				var b = a.sort(function() {
				    return .5 - Math.random();
				})
				this.num1 = b[0];
				this.num2 = b[1];
				this.num3 = b[2];
				this.num4 = b[3];
				this.num5 = b[4];
				this.num6 = b[5];
				this.num7 = b[6];
				this.num8 = b[7];
				this.num9 = b[8];
				this.num0 = b[9];
			},
			getArr(doms){
				var arr = [];
				if(doms.length){
					for(let j = 0; j <  activeDiv.length; j++){
						arr.push(doms[j])
					}
				}else{
					arr.push(doms)
				}
				return arr;
			},
			togClass(){
				Array.prototype.addClass = function (myclass){
					console.log(this,'mydiv')
					for(let i = 0; i < this.length;i++){
	//						console.log(this[i]);
						let flag =this[i].className.indexOf(myclass);
						if(flag < 0){
							this[i].className += ' '+ myclass;
						}
					}
				}
				Array.prototype.removeClass = function (myclass){

					for(let i = 0; i < this.length;i++){
	//						console.log(this[i]);
						let flag =this[i].className.indexOf(myclass);
						if(flag > 0){
	//							console.log(123)
							var str = this[i].className.replace(myclass,'');
							this[i].className = str;
						}
					}
				}
			}
			//键盘结束
    },
    components: {

    },
    created() {
        this.sessionId = getHrefParams().sessionId;
		this.togClass();
    },
    beforeDestroy(){
      clearTimeout(this.timer);
    },
    watch: {
// 		keyall(data) {
//			this.passwordfn1();
//		},

    }

}
</script>

<style scoped="scoped">
	.keyWalletZx {
		position: fixed;
		top: 0px;
		height: 100%;
		width: 100%;
		z-index: 100;
		touch-action: none;
	}
	.classBoder1{
		border-top: 0;
		border-left: 0;
	}
	.classBoder2{
		border-top: 0;
	}
	.classBoder3{
		border-top: 0;
		border-right: 0;
	}
	.passBoxZx{
		width: 100%;
		position: absolute;
		bottom: 0;
	}
	.keyWalletHideZX{
		z-index: 0;
		height: 0;
		width: 0;
	}
	.keyWalletZx .keyWalletcontant {
		width: 100%;
		height: 7rem;
		margin: 0;
		padding: 0;
		background-color: #fff;
		z-index: 101;
	}
    .keyWalletZx .title {
		text-align: left;
		display: flex;
		align-items: center;
		justify-content: center;
		/*padding-bottom: 0.3rem;*/
		/*margin-top: 0.3rem;*/
		border-bottom: 1px solid #ddd;
	}
	.keyWalletZx .keydiv{
		margin-top: 1rem;
	}
	.passHeaderZx{
		height: 2rem;
		line-height: 2rem;
	}
	.passHeaderZx{
		height: 2rem;
	}
	.keyWalletZx .keydiv .srinput {
		position: relative;
		/*width: 13rem;*/
		height: 2rem;
		margin: 0 auto;
	}
	.keyWalletZx .keydiv p {
		margin: 0.1rem 0rem;
	}
	.keyWalletZx .keydiv .srinput .maxinput {
		position: absolute;
		width: 100%;
		height: 2rem;
		z-index: 103;
		top: 0px;
		left: 0px;
		opacity: 0;
	}
	.keyWalletZx .keydiv .srinput .mininput {
		position: absolute;
		width: 100%;
		height: 2rem;
		z-index: 102;
		top: 0px;
		left: 0px;
	}

	.keyWalletZx .keydiv .mininput input {
		border: 1px solid #ddd;
		display: inline-block;
		padding-left: 0.9rem;
		width: 2rem;
		height: 2rem;
	}
	.keyWalletZx .sure {
		display: inline-block;
		margin-top: 0.8rem;
		width: 3rem;
		height: 1.4rem;
		line-height: 1.4rem;
		border-radius: 0.2rem;
		background-color: #EA3939;
		color: #fff;
	}

	.keyWalletmaskZx{
		background: black;
		opacity: .5;
		z-index: 100;
	}
	.hide{
		position: absolute;
		right: 0.5rem;
		font-size: 16px;
		width: 10%;
		text-align: right;
	}

	.myBox {
		border: 0;
		transition: 0.3s ;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		transform: height 2s;
		background: #fff;
		font-weight: 700;
		font-size: 16px;
		border-top: 1.5px solid #FCFCFC;
	}
	.myBox div {
		width: 33.3%;
		height: 2.5rem;
		text-align: center;
		line-height: 2.5rem;
		border-left: 1px solid #d2d2d2;
		border-top: 1px solid #d2d2d2;
		border-spacing: 0px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
	}

	.myBox span div:last-child {
		border-right: 1px solid #d2d2d2;
	}

	.myBox span {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
	}

	.zxsure{
		border-left: 0;
		background: #F2F2F2;
	}
	.del{
		display: flex;
		justify-content: center;
		align-items: center;
		border-right: 0;
		background: #F2F2F2;
	}
	.del span{
		width: 20%;
	}
	.lp{
		background: black;
		opacity: 0.3;
	}
</style>


